<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>留言管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card class="title-container">
      <!-- 设置添加行 -->
      <!-- <el-row>
        <el-col :span="8">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
          >
            添加文章
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            size="small"
            v-model="filterContent"
            placeholder="请输入相关内容"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleFilter"
            ></el-button>
          </el-input>
        </el-col>
      </el-row> -->
      <!-- 建立数据表格 -->
      <el-table :data="messages" border stripe>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="访客名称" prop="name"></el-table-column>
        <el-table-column label="发布时间" prop="create_time"></el-table-column>
        <el-table-column label="留言内容" prop="content"></el-table-column>
        <el-table-column label="访客主页" prop="url"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.row.id)"
            >
              编辑
            </el-button> -->
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 3.分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 删除对话框 -->
    <el-dialog title="删除用户" :visible.sync="isDelete">
      <el-form>
        <el-form-item>是否真要删除该条留言?</el-form-item>
        <el-form-item>
          <el-button type="success" @click="del">确定</el-button>
          <el-button @click="Cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'messages',
  data() {
    return {
      total: 6,
      messages: [],
      page: 1,
      size: 5,
      isDelete: false,
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      this.$http
        .get(`/messages?page=${this.page}&size=${this.size}`)
        .then((res) => {
          this.total = res.result.total
          this.messages = res.result.data
        })
    },
    handleSizeChange(s) {
      this.size = s
      this.getMessage()
    },
    handleCurrentChange(p) {
      this.page = p
      this.getMessage()
    },
    handleDelete(id) {
      this.isDelete = true

      this.id = id
    },
    del() {
      // console.log(this.id)
      this.$http.delete(`/messages/${this.id}`).then((res) => {
        const { message } = res
        console.log(message)
        this.$message({
          message: message,
          type: 'success',
        }),
          (this.isDelete = false)
        this.getMessage()
      })
    },
    Cancel() {
      this.isDelete = false
    },
  },
}
</script>

<style scoped>
.el-breadcrumb {
  font-size: 20px;
}
.title-container {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
